<template>
    <div class="test-list-container">
        <el-row class="search">
            <el-col :span="24">
                <el-radio-group v-model="searchArgs.type" size="mini">
                    <el-radio-button label="my">我的测试</el-radio-button>
                    <el-radio-button label="all">全部</el-radio-button>
                </el-radio-group>
                <el-input v-model="searchArgs.requirementName" class="name" size="mini">
                    <template slot="prepend">需求名称</template>
                </el-input>
                <el-button type="primary" size="mini">查询</el-button>
            </el-col>
        </el-row>
        <div>
            <el-table
                    size="mini"
                    border
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        v-for="item in columns"
                        :key="item.prop"
                        :prop="item.prop"
                        :label="item.label"
                        :show-overflow-tooltip="true"
                        :sortable="item.sortable"
                        :min-width="item.width">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="text"
                                @click="handleOpenTest(scope)">测试</el-button>
                        <el-button
                                size="mini"
                                type="text"
                                @click="handleOpenSubmit(scope)">提交上线</el-button>
                        <el-button
                                size="mini"
                                type="text"
                                @click="handleOpenReject(scope)">驳回</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="page.size"
                    background
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="400">
            </el-pagination>
        </div>
        <el-dialog
                width="50%"
                :visible.sync="testDialog.visible"
                title="选择测试站点">
            <div>
                <el-row :gutter="20" class="type-list">
                    <el-col :span="8">
                        <div>
                            <span class="link-none">欢go</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <span class="link-none">欢go</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <span class="link-none">欢go</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div>
                            <span class="link-none">欢go</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
        <el-dialog
                width="50%"
                :visible.sync="submitDialog.visible"
                title="提交上线">
            <div>
                <p>您确定要提交给栏目上线吗？</p>
                <el-input type="textarea" size="mini" placeholder="请输入提交说明"></el-input>
            </div>
            <span slot="footer">
                <el-button @click="submitDialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="handleOnline">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                width="50%"
                :visible.sync="rejectDialog.visible"
                title="驳回">
            <div>
                <p>您确定要驳回该需求吗？</p>
                <el-input type="textarea" size="mini" placeholder="请输入驳回说明"></el-input>
            </div>
            <span slot="footer">
                <el-button @click="rejectDialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="handleReject">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "testList",
        data() {
            return {
                searchArgs: {
                    type: "my",
                    requirementName: "",
                    current: null,
                    size: null,
                },
                columns:[
                    {
                        prop: "requirementId",
                        label: "需求ID",
                        width: 60,
                        sortable: true
                    },
                    {
                        prop: "requirementName",
                        label: "需求名称",
                        width: 100,
                        sortable: true
                    },
                    {
                        prop: "appName",
                        label: "应用名称",
                        width: 80,
                        sortable: false
                    },
                    {
                        prop: "bizName",
                        label: "栏目",
                        width: 80,
                        sortable: true
                    },
                    {
                        prop: "version",
                        label: "系统版本",
                        width: 80,
                        sortable: true
                    },
                    {
                        prop: "sdkType",
                        label: "埋点SDK类型",
                        width: 100,
                        sortable: true
                    },
                    {
                        prop: "status",
                        label: "状态",
                        width: 80,
                        sortable: true
                    },
                    {
                        prop: "creatorName",
                        label: "负责人",
                        width: 80,
                        sortable: true
                    },
                    {
                        prop: "createTime",
                        label: "创建时间",
                        width: 80,
                    },
                    {
                        prop: "updateTime",
                        label: "更新时间",
                        width: 80,
                    },
                ],
                tableData: [
                    {
                        requirementId: 1,
                        createTime: '2016-05-02',
                        requirementName: '需求名称test',
                        appName: 'testtesttesttesttesttesttesttest'
                    }, {
                        requirementId: 2,
                        createTime: '2016-05-02',
                        requirementName: '需求名称test',
                        appName: 'testtesttesttesttesttesttesttest'
                    }, {
                        requirementId: 3,
                        createTime: '2016-05-02',
                        requirementName: '需求名称test',
                        appName: 'testtesttesttesttesttesttesttest'
                    }, {
                        requirementId: 4,
                        createTime: '2016-05-02',
                        requirementName: '需求名称test',
                        appName: 'testtesttesttesttesttesttesttest'
                    }],
                testDialog: {
                    visible: false
                },
                submitDialog: {
                    visible: false
                },
                rejectDialog: {
                    visible: false
                }
            }
        },
        methods: {
            //
            handleOpenTest(scope) {
                console.log(scope);
                this.testDialog.visible = true;
            },
            handleTest() {
                this.testDialog.visible = false;
            },
            handleOpenSubmit(scope) {
                console.log(scope);
                this.submitDialog.visible = true;
            },
            handleOnline() {
                this.submitDialog.visible = false;
            },
            handleOpenReject(scope) {
                console.log(scope);
                this.rejectDialog.visible = true;
            },
            handleReject() {
                this.rejectDialog.visible = false;
            },
            handleSizeChange(size) {
                this.searchArgs.size = size;
                this.searchArgs.current = 1;
            },
            handleCurrentChange(page) {
                this.searchArgs.current = page;
            }
        }
    }
</script>

<style scoped lang="scss">
    .type-list {
        .el-col {
            margin-bottom: 10px;
            &>div {
                cursor: pointer;
                border: 1px solid #01b27a;
                height: 100px;
                line-height: 100px;
                text-align: center;
            }
        }
    }
</style>
